<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost/resources/back/">

    <!-- 引入了css文件-->
    <!--    <link rel="stylesheet" href="lib/zTree/v3/css/demo.css" type="text/css">-->
    <link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <!-- 引入的js文件-->
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
    <script type="text/javascript" src="js/AjaxUtils.js"></script>
    <script type="text/javascript" src="js/JsonUtils.js"></script>
    <script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback: { // 事件
                onRename: zTreeOnRename, // 回调函数
                onRemove: zTreeOnRemove,
                onDrop: zTreeOnDrop // 拖拽事件
            },
            view: {
                addHoverDom: addHoverDom, // 光标移入触发
                removeHoverDom: removeHoverDom // 光标移除节点触发
            },
            edit: {
                enable: true,
                showRemoveBtn: true, // 光标放到节点上面显示删除的按钮
                showRenameBtn: true,
                removeTitle: "删除节点", // 光标反倒删除按钮上面显示辅助信息
                renameTitle: "编辑节点",
                drag: {
                    prev: true,
                    next: true,
                    inner: true
                }
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = null;

        // 页面初始化完成后调用
        $(document).ready(function () {

            // 1.发送异步请求查询所有的商品类型
            get("back/goodsTypeController/getGoodsTypeTree", function (resp) {
                console.info(resp.data);
                // resp.data是一个简单的JSON，这个需要转成标准的JSON
                zNodes = format(resp.data);
                // 初始化树节点
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        });


        function zTreeOnRename(event, treeId, treeNode, isCancel) {
            console.info("rename " + treeNode.name);
            var param = new Object();
            param.id = treeNode.id;
            param.goodsTypeName = treeNode.name;
            send("back/goodsTypeController/updateGoodsType",param,function(resp){
                console.info(resp);
            });
        }

        function zTreeOnRemove(event, treeId, treeNode) {
            console.info("remove" + treeNode.name);
            get("back/goodsTypeController/deleteGoodsTypeById/"+treeNode.id,function(resp){
                console.info(resp);
            });
        }

        function addHoverDom(treeId, treeNode) {

            // 1.获取用户点击节点的DOM元素
            var aObj = $("#" + treeNode.tId + "_a");
            if ($("#diyBtn_"+treeNode.id).length>0) return;

            // 2.创建一个新的元素
            var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' > </span>"
                + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
                + "' title='"+treeNode.name+"' onfocus='this.blur();'>add</button>";

            // 3.把这个元素放到用户点击节点的后面
            aObj.append(editStr);

            // 4.按照的新创建的按钮
            var btn = $("#diyBtn_"+treeNode.id);

            // 5.给按钮绑定一个事件
            if (btn) btn.bind("click", function(){
                 console.info("addNode " + treeNode.name);
                 var url = "http://localhost/back/goodsTypeController/addGoodsType.html?id="+treeNode.id;
                layer_show("添加商品类别",url,250,200);
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#diyBtn_"+treeNode.id).unbind().remove();
            $("#diyBtn_space_" +treeNode.id).unbind().remove();
        };

        function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
            console.info(treeNodes[0].name+",托到了:"+targetNode.name);

            // udpate set pid = targetNode.id where id =treeNodes[0].id
        };

    </SCRIPT>

</head>
<body>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>